<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .button {
        background-color: green;
        color: #fff;
      }

      .active {
        color: red;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <h2>Tab选项卡切换高亮效果</h2>
      <button
        v-for="tab in tabs"
        class="button"
        :class="{active: tab.id === curId}"
        @click="curId = tab.id"
      >
        {{ tab.name }}
      </button>

      <h2>贴标签效果</h2>
      <button
        @click="handleClick('帅气')"
        :class="{active: curTags.includes('帅气')}"
      >
        帅气
      </button>
      <button
        @click="handleClick('迷人')"
        :class="{active: curTags.includes('迷人')}"
      >
        迷人
      </button>
      <button
        @click="handleClick('钱多')"
        :class="{active: curTags.includes('钱多')}"
      >
        钱多
      </button>
      <button
        @click="handleClick('话少')"
        :class="{active: curTags.includes('话少')}"
      >
        话少
      </button>
      <button
        @click="handleClick('死得早')"
        :class="{active: curTags.includes('死得早')}"
      >
        死得早
      </button>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      createApp({
        data() {
          return {
            curId: 3, // 用于表示当前高亮Tab的Id
            tabs: [
              { id: 1, name: "Tab1" },
              { id: 2, name: "Tab2" },
              { id: 3, name: "Tab3" },
            ],
            curTags: ["帅气", "话少"],
          };
        },

        methods: {
          handleClick(str) {
            // this.curTags.push(str);

            if (this.curTags.includes(str)) {
              this.curTags = this.curTags.filter(item => item !== str)
            } else {
              this.curTags.push(str);
            }
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
